<template>
  <div class="userWrapper">
    <div class="actvator">
      <img :src="props.user?.avatar" />
    </div>
    <span>{{ props.user?.username }}</span>
  </div>
</template>
<script lang="ts" setup>
const props = defineProps({
  user: {
    type: String,
    defualt: {}
  }
})

const getRandomNumber = (min, max) => {
  return Math.floor(Math.random() * (max - min + 1)) + min
}

const imgRandom = getRandomNumber(0, 8)
</script>
<style lang="less" scoped>
.userWrapper {
  padding: 0 3.5%;
  padding-top: 12px;
  display: flex;
  align-items: center;
  padding-bottom: 12px;

  &:hover {
    background-color: #dedede;
  }
  .actvator {
    border-radius: 3px;
    img {
      width: 35px;
      height: 35px;
    }
  }
  span {
    font-size: 14px;
    color: #000;
    margin-left: 12px;
  }
}
</style>
